<style lang="less">
    .resources-pool-edit {
        .img {
            height: 200px;
        }
    }
</style>
<template>
    <div>
        <ZkModalVue class="resources-pool-edit" :title="title" :size="'lg'" :visible="visible" @cancel="handleCancel" @ok="handleOk">
            <a-form-model ref="form" :model="info" v-bind="formLayout" :rules="rules">
                <a-row>
                    <a-col>
                        <a-form-model-item label="资源名称" prop="title">
                            <a-input v-model="info.title" :maxLength="50" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col>
                        <a-form-model-item label="资源标签">
                            <TagsInput v-model="info.tags"></TagsInput>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="资源状态" prop="status" :labelCol="formLayout1.labelCol" :wrapperCol="formLayout1.wrapperCol">
                            <ZkSelect v-model="info.status" :options="getStatusOpts"></ZkSelect>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row v-if="id">
                    <a-col :span="12">
                        <a-form-model-item label="访问次数" :labelCol="formLayout1.labelCol" :wrapperCol="formLayout1.wrapperCol">
                            <span>{{info.viewNum}}</span>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="发布时间" :labelCol="formLayout1.labelCol" :wrapperCol="formLayout1.wrapperCol">
                            <span>{{info.createdTimeStr}}</span>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col>
                        <a-form-model-item label="资源图片" prop="picUrl" :labelCol="formLayout2.labelCol" :wrapperCol="formLayout2.wrapperCol">
                            <ImgUpload class="img" :src="info.picUrl" @ok="picUploadOk"></ImgUpload>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <!-- <a-row>
                    <a-col>
                        <a-form-model-item label="资源描述" prop="fileUrl" :labelCol="formLayout2.labelCol" :wrapperCol="formLayout2.wrapperCol">
                            <ImgUpload class="img" :src="info.fileUrl" @ok="fileUploadOk"></ImgUpload>
                        </a-form-model-item>
                    </a-col>
                </a-row> -->
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="资源描述" prop="description">
                            <a-textarea v-model="info.description" :autoSize="{ minRows: 4, maxRows: 10 }" :maxLength="500" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </ZkModalVue>
    </div>
</template>
<script>
    import ZkModalVue from '@/appBase/ZkModal.vue';
    import ZkSelect from '@/appBase/ZkSelect.vue';
    import ImgUpload from '@/modules/common/components/ImgUpload.vue';
    import { lenRule, notEmptyRule } from '@/appBase/formRules';
    import { getStatusOpts } from '../common/service/base';
    import { BaseStatusEnum } from '../common/enum/enum';
    import { addResFile, queryResFileDetail, updateResFile } from '@/api/resourcesPool';
    import { formatTimeStr } from '@/appBase/utils';
    import TagsInput from '@/modules/common/components/TagsInput.vue';

    export default {
        name: "ResourcesPoolEdit",
        components: {
            ZkModalVue,
            ZkSelect,
            ImgUpload,
            TagsInput
        },
        data() {
            return {
                title: '资源新增',
                pageLoading: false,
                visible: false,
                /** 布局配置 */
                formLayout: {
                    layout: 'horizontal',
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 4 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 18 }
                    }
                },
                formLayout1: {
                    layout: 'horizontal',
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 8 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 12 }
                    }
                },
                formLayout2: {
                    layout: 'horizontal',
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 4 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 9 }
                    }
                },
                id: null,
                categoryId:null,
                info: {
                    title: '',
                    tags: '',
                    description: '',
                    picUrl: '',
                    // fileUrl: '',
                    // fileSize: '',
                    status: BaseStatusEnum.ENABLE,
                    // originalName: '',
                    // typeName: '',
                    createdTime: '',
                    createdTimeStr: '',
                    // fileSizeStr: ''
                },
                rules: {
                    title: [notEmptyRule(), lenRule({ max: 50 })],
                    tags: [notEmptyRule(), lenRule({ max: 50 })],
                    picUrl: [notEmptyRule()],
                    fileUrl: [notEmptyRule()],
                    gradeCode: [notEmptyRule()],
                    status: [notEmptyRule()],
                    description: [lenRule({ max: 500 })]
                }
            }
        },
        methods: {
            /**
             * 显示
             * @param {Object} param
             * @param {String} param.id
             * @param {String} param.categoryId 分类
             */
            show(param) {
                Object.assign(this.info, this.$options.data().info);
                this.id = param.id || null;
                this.categoryId = param.categoryId;
                this._onOk = param.onOk;
                this._onCancel = param.onCancel;
                this.visible = true;
                this.$nextTick(() => {
                    this.$refs.form.resetFields();
                    this.info.tags = '';
                    if (this.id) {
                        this.title = '资源修改';
                        queryResFileDetail({ id: this.id }).then((result) => {
                            result.createdTimeStr = formatTimeStr(result.createdTime, 'YYYY-MM-DD HH:mm:ss');
                            const fileSize = parseFloat(result.fileSize) / 1024 / 1024;
                            result.fileSizeStr = `${fileSize.toFixed(4)}（MB）`;
                            Object.assign(this.info, result);
                        });
                    } else {
                        this.title = '资源新增';
                    }
                })
            },
            handleOk() {
                this.$refs.form.validate(async (valid) => {
                    console.log(valid);
                    if (!valid) return;
                    const param = this.info;
                    param.categoryId = this.categoryId;
                    param.id = this.id;
                    if (this.id) {
                        await updateResFile(param);
                    } else {
                        await addResFile(param);
                    }
                    this.visible = false;
                    if (this._onOk) this._onOk();
                })
            },
            handleCancel() {
                this.visible = false;
                if (this._onCancel) this._onCancel();
            },
            getStatusOpts,
            picUploadOk(val) {
                this.info.picUrl = val.path;
            }
            // fileUploadOk(val) {
            //     this.info.fileUrl = val.path;
            //     this.info.fileSize = val.size;
            //     this.info.originalName = val.name;
            // }
        }
    }
</script>